<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer"
        />

        <q-toolbar-title> Quasar App </q-toolbar-title>

        <div class="myinfo">
          <q-avatar style="width: 0.8em; height: 0.8em">
            <q-img :src="portrait" />
          </q-avatar>
          <span class="myinfo-block">{{ nick_name }}</span>
          <q-menu
            :offset="[5, 8]"
            transition-show="jump-down"
            transition-hide="jump-up"
          >
            <q-list dense>
              <q-item clickable v-close-popup to="">
                <q-item-section
                  avatar
                  class="q-mr-sm q-pa-none"
                  style="min-width: 0"
                >
                  <q-icon name="person" size="xs" />
                </q-item-section>
                <q-item-section>个人中心</q-item-section>
              </q-item>
              <q-item clickable v-close-popup to="">
                <q-item-section
                  avatar
                  class="q-mr-sm q-pa-none"
                  style="min-width: 0"
                >
                  <q-icon name="settings" size="xs" />
                </q-item-section>
                <q-item-section>个人设置</q-item-section>
              </q-item>
              <q-separator color="grey-4" />
              <q-item clickable v-close-popup @click="loginBack()">
                <q-item-section
                  avatar
                  class="q-mr-sm q-pa-none"
                  style="min-width: 0"
                >
                  <q-icon name="logout" size="xs" />
                </q-item-section>
                <q-item-section>退出登录</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-white"
      :width="240"
    >
      <div class="absolute-top bg-white q-mt-sm">
        <div class="bg-transparent q-px-sm q-gutter-x-sm">
          <q-avatar class="q-mb-sm">
            <q-img
              style="width: 40px; cursor: pointer"
              src="../assets/sika-logo.png"
              @click="router.push('/')"
            />
          </q-avatar>
          <div class="text-body1 inline-block text-primary">
            <strong>元 气 动 漫</strong>
          </div>
        </div>
      </div>
      <div class="leftMenuHeader">
        <q-scroll-area class="fit">
          <div class="col main-menu">
            <!-- <q-list v-for="u in menuList" :key="u.id">
              <q-expansion-item
                expand-separator
                v-if="u.children"
                :icon="u.icon"
                :label="u.name"
                :header-style="headerStyleActive(u)"
                :value="openMenu(u)"
              >
                <q-expansion-item
                  :header-inset-level="1.2"
                  :label="s.name"
                  expand-icon-class="expansion-hide-icon"
                  v-for="s in u.children"
                  :key="s.id"
                  @click="go(s)"
                  :style="itemStyleActive(s)"
                  clickable
                />
              </q-expansion-item>
              <q-expansion-item
                v-else
                :icon="u.icon"
                :label="u.name"
                expand-icon-class="expansion-hide-icon"
                @click="go(u)"
                :style="itemStyleActive(u)"
              />
            </q-list> -->
            <q-list>
              <my-q-menu-item :my-router="menuList" :init-level="0" />
            </q-list>
          </div>
        </q-scroll-area>
      </div>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { routeDatas } from './layoutData';
import { useRoute, useRouter } from 'vue-router';
import { openURL } from 'quasar';
import { GlobalStore } from '@/stores';

const menuData = routeDatas;
const globalStore = GlobalStore();

export default defineComponent({
  name: 'MainLayout',

  components: {},

  setup() {
    const leftDrawerOpen = ref(false);
    const route = useRoute();
    const router = useRouter();

    const menuList = globalStore.menuList;
    const nick_name = globalStore.userInfo.nick_name;
    const portrait = globalStore.userInfo.portrait;

    console.log('打印', menuData, menuList, globalStore.userInfo);
    const headerStyleActive = (item: any) => {
      if (route.path.startsWith(item.view_path)) {
        return {
          color: '#1890ff',
        };
      }
      return {};
    };
    const openMenu = (item: any) => {
      if (route.path.startsWith(item.view_path)) {
        return true;
      }
      return false;
    };
    const go = (u: any) => {
      if (u.internalOrExternal) {
        openURL(u.view_path);
      } else if (u.view_path !== route.path) {
        router.push(u.view_path);
      }
    };
    const itemStyleActive = (item: any) => {
      if (route.path.startsWith(item.view_path)) {
        return {
          color: '#1890ff',
        };
      }
      return {};
    };

    const loginBack = async () => {
      await globalStore.Logout();
      // console.log(storage.get('Access-Token'));
      router.push('/login');
      console.log('注销登录');
    };

    return {
      leftDrawerOpen,
      menuData,
      menuList,
      nick_name,
      portrait,
      router,
      loginBack,
      openMenu,
      headerStyleActive,
      go,
      itemStyleActive,
      toggleLeftDrawer() {
        leftDrawerOpen.value = !leftDrawerOpen.value;
      },
    };
  },
});
</script>

<style scoped lang="scss">
.leftMenuHeader {
  height: calc(100% - 65px);
  margin-top: 65px;
}
</style>

<style>
.cc-active-menu {
  border-right: '0.2em solid #1890ff';
}

.expansion-hide-icon {
  display: none;
}

/* .ly-icon-btn {
  line-height: 50px;
  height: 50px;
  border-bottom: 1px #fff solid;
  border-radius: 0;
} */

.q-item__section--main ~ .q-item__section--side {
  padding-left: 0px;
}

/* .main-menu .q-item {
  min-height: 35px;
} */
.myinfo {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
}
.myinfo-block {
  max-width: 80px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-left: 8px;
}
</style>
